@import "../varibles";
@import "../mixins/mixin";

.vue-radio{
	@include inline-block;
	position: relative;
	line-height: 1;
	cursor:pointer;
}

.vue-radio-inner{
	@include inline-block;
	position: relative;
}

.vue-radio-input{
	position: absolute;
	opacity: 0;
}

.vue-radio-icon{
	@include inline-block;
	width:$radio-icon-width;
	height:$radio-icon-height;
	border:$radio-icon-border;
	border-radius:$radio-icon-radius;
	margin-top:-5px;
	background-color: $radio-icon-background;
}

.vue-radio-input:checked+.vue-radio-icon{
	border:$radio-icon-border-checked;
	
	&:after{
		content:"";
		display: block;
		margin: 3px  auto;
	    width: 6px;
	    height: 6px;
	    border-radius: 6px;
		background-color: $radio-icon-background-checked;
	}
}


.vue-radio-input:disabled+.vue-radio-icon{
	cursor: not-allowed;
	border:$radio-icon-border-disabled;
	background-color: $radio-icon-background-disabled;
	&:before{
		background-color: $radio-icon-border-background-disabled;
	}
	&:after{
		background-color: $radio-icon-border-background-disabled;
	}
}

.vue-radio-text{
	@include inline-block;
	margin-left:4px;
}